I made the that will let me clone a div, drag it, and drop it inside a droppable area and then let me resize the cloned div.

However, I'm trying to contain the cloned div inside the droppable area alone, using the containment parameter, but failed. Although the containment parameter worked while dragging the cloned div from the original div at the beginning, but once I drop it inside the droppable div, I can't control the containment.

Here's the code so far:

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<div class="draggable" style="background:lightgray;width:50px;">item</div>
<br/><br/><br/>
<div id="droppable" style="border:1px solid gray;width:500px;height:500px;"></div>

<script>
$(function() {
   
    $(".draggable").draggable({
      revert: "invalid",
      containment: "#droppable",
      helper: "clone",
      cursor: "move"
    });

    $("#droppable").droppable({
      accept: ".draggable",
      containment: "#droppable",
      drop: function( event, ui ) {
          ui.draggable.clone().appendTo($(this)).draggable().removeClass("draggable").addClass("draggable2");
          $(".draggable2").resizable();
        }
    });
});
</script>

And here's the Fiddle to play around.

Please note that:

• I can able to drag and drop the draggable div inside droppable div
• I can able to resize the only cloned div
• I can able to restrict the containment of the cloned draggable div only at the first drag from the original div.
• But when I drop the cloned div, the containment resets to the whole page.

\ Tried adding this, no hope.

$('.draggable2').draggable({
  revert: 'invalid',
  containment: '#droppable',
  cursor: 'move',
});

Any help is greatly appreciated.